<template>
    <div class="pageWrapper">
        <div class="closeBtn">
            <span class="iconfont iconicon-test"></span>
        </div>
        <div class="logoWrapper">
            <span class="iconfont iconnew"></span>
        </div>
        <!-- 3. 渲染子组件 -->
        <!-- 用户名/手机号 -->
        <AuthInput
            placeholder="手机号"
            type="text"
            :rule="/^\d{5,11}$/"
            err_msg="请输入手机号"
            @valChange="setUsername"
        />
        <!-- 昵称 -->
        <AuthInput
            placeholder="昵称"
            type="text"
            :rule="/^\w{3,8}$/"
            err_msg="昵称必须是三位字符"
            @valChange="setNickname"
        />
        <!-- 密码 -->
        <AuthInput
            placeholder="密码"
            type="password"
            :rule="/^\w{3,8}$/"
            err_msg="密码不合法"
            @valChange="setPassword"
        />
        <!-- 2. 父组件进行监听 -->
        <AuthBtn btnText="提交注册" @submit="register"/>
    </div>
</template>

<script>
    // 1. 引入子组件
    import AuthInput from '../components/AuthInput'
    import AuthBtn from '../components/AuthBtn'

    export default {
        data() {
            return {
                username: '',
                nickname: '',
                password: ''
            }
        },
        // 2. 注册子组件
        components: {
            AuthInput,
            AuthBtn
        },
        methods: {
            register() {
                console.log('父组件得到通知, 按钮被点击了, 后面应该发送请求');
                // 3. 编写后续处理函数
                // 之前存起来的输入框数据, 
                // 这里就可以用来发送请求了
                console.log('用户名', this.username);
                console.log('昵称', this.nickname);
                console.log('密码', this.password);

                // 请求前的判断
                if (!this.username || !this.nickname || !this.password) {
                    this.$toast.fail('请输入完整信息')
                }

                // 发请求
                this.$axios({
                    method: 'post',
                    url: '/register',
                    data: {
                        username: this.username,
                        nickname: this.nickname,
                        password: this.password
                    }
                }).then(res=>{
                    console.log(res.data);
                    if (res.data.message == "注册成功") {
                        this.$toast.success('注册成功')
                    }
                }).catch(err=>{
                    console.dir(err)
                    this.$toast.fail('系统错误')
                })
            },
            setUsername(newUser) {
                this.username = newUser
            },
            setNickname(newNickname) {
                this.nickname = newNickname
            },
            setPassword(newPass) {
                this.password = newPass
            }
        }
    };
</script>

<style lang="less" scoped>
    .pageWrapper {
        padding: 24/360 * 100vw;
    }
    .iconicon-test {
        font-size: 26/360 * 100vw;
    }
    .logoWrapper {
        text-align: center;
        .iconnew {
            font-size: 126/360 * 100vw;
            color: #d81e06;
        }
    }
</style>